<template>
	<div class="feedback-table table-container">
		<el-table
			style="width: 100%;"
			stripe
			highlight-current-row
			:data="feedbacks"
			@filter-change="$emit('filterChange',$event)"
		>
			<el-table-column
				label="反馈时间"
				prop="time"
				width="100px"
				align="center"
			/>
			<el-table-column
				label="反馈用户"
				prop="user.nickname"
				align="center"
			/>
			<el-table-column
				label="反馈类型"
				:filters="FEEDBACK_TYPE"
				filter-placement="bottom-end"
				:filter-multiple="false"
				column-key="filter_type"
				prop="type"
			/>
			<el-table-column 	label="反馈内容">
				<template slot-scope="scope">
					<el-button
						size="mini"
						@click="showIntro=scope.row.content"
					>
						查看反馈内容
					</el-button>
				</template>
			</el-table-column>
			<el-table-column
				label="反馈状态"
				align="center"
				:filters="FEEDBACK_STATUS"
				filter-placement="bottom-end"
				:filter-multiple="false"
				column-key="filter_status"
				prop="status"
			>
				<template slot-scope="scope">
					<el-tag :type="statusMap(scope.row).tagType">{{statusMap(scope.row).text}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				width="170"
			>
				<template slot-scope="scope">
					<!-- 未处理状态 -->
					<div v-if="scope.row.status === 0">
						<el-button
							type="primary"
							size="mini"
							@click="deal(scope.row)"
						>
							受理
						</el-button>
					</div>
					<!-- 处理中状态 -->
					<div v-else-if="scope.row.status === 1">
						<el-select
							class="feedback-result"
							size="mini"
							placeholder="反馈结果类型"
							v-model="scope.row.feedbackResult"
						>
							<el-option
								v-for="item in FEEDBACK_RESULT"
								:key="item.value"
								:label="item.text"
								:value="item.value"
							/>
						</el-select>
						<el-button
							type="success"
							size="mini"
							@click="solve(scope.row)"
						>
							已解决
						</el-button>
					</div>
					<!-- 已解决状态 -->
					<div
						v-else
						style="color: $dark3;"
					>
						{{scope.row.feedbackResult}}
					</div>
				</template>
			</el-table-column>
		</el-table>
		<IntroCard
			v-if="showIntro"
			title="反馈内容"
			:html="showIntro"
			@close="showIntro=''"
		/>
	</div>
</template>

<script>
import { putFeedback } from '@user/api/user'
import { FEEDBACK_STATUS, FEEDBACK_TYPE, FEEDBACK_RESULT } from '@user/constants/feedback'

export default {
  props: {
    feedbacks: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      FEEDBACK_STATUS,
      FEEDBACK_TYPE,
      FEEDBACK_RESULT,
      showIntro: '', // 展示反馈详情
    }
  },
  computed: {
    statusMap() {
      return function(row) {
        const status = FEEDBACK_STATUS.find(item => item.value === row.status)

        return status
      }
    }
  },
  methods: {
    /**
     * 受理反馈，修改status为1，reply为您的问题正在处理，感谢您的反馈。
     */
    deal(feedback) {
      this.$confirm('确认受理该反馈？', async() => {
        await putFeedback({
          id: feedback.id,
          status: 1,
          reply: '您的问题正在处理，感谢您的反馈。'
        })
        /* 更新父级feedbacks状态 */
        feedback.status = 1
        this.updateFeedback(feedback)
        this.$success('受理成功')
      })
    },
    /**
     * 解决反馈问题，需要填写反馈类型，后台根据问题类型发放一些Aha币
     */
    solve(feedback) {
      if (feedback.feedbackResult === null) {
        this.$warn('反馈结果不能为空')
        return
      }
      this.$confirm('确认解决该反馈？', async() => {
        putFeedback({
          id: feedback.id,
          status: 2,
          reply: '您的反馈已解决,感谢您的反馈。',
          level: feedback.feedbackResult
        })
        feedback.status = 2
        feedback.feedbackResult = FEEDBACK_RESULT[ feedback.feedbackResult ].text
        this.updateFeedback(feedback)
        this.$success('处理成功')
      })
    },
    updateFeedback(feedback) {
      /* 更新父级feedbacks状态 */
      this.$emit('updateFeedback', {
        index: this.feedbacks.findIndex(item => item.id === feedback.id),
        feedback
      })
    }
  }
}
</script>
